<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/cart.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2421095_7n6e3jepg8h.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2199072_95wbojnuyck.css">
    <script src="./js/vue.js"></script>
    <script src="./js/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script>
    <script src="./js/cart.js"></script>
    <style>

    </style>
</head>

<body>
    <header>
        <div class="top_box">
            <span class="top_left">
                <span>
                    您好，欢迎来到T社定制，愿您有一次愉快的定制体验。
                </span>
                <i class="iconfont icon-erji"></i>
                <span>
                    我们的服务热线：400-678-3233
                </span>
            </span>
            <div class="top_right">
                <a href="login.html" class="login">
                    <span>
                        注册/登录
                    </span>
                </a>
                <span class="top_right_l"></span>
                <a href="">网站地图</a>
                <span class="top_right_l"></span>
                <span>
                    <i class="iconfont icon-xingxing"></i>
                    <span>收藏本站</span>
                </span>
            </div>
        </div>
        <div class="mian-headerbox">
            <div class="mian_header">
                <div class="header_nav">
                    <div class="nav_left">
                        <img src="./images/主页/T社定制 (1).png" alt="">
                    </div>
                    <div class="nav_right">
                        <div href="" class="nav_menu">
                            <div class="link-linershouye"></div>
                            <a class="item shouye" href="">
                                <div class="link-holder">
                                    首页
                                </div>
                            </a>
                        </div>
                        <div class="nav_menu">
                            <div class="link-liner"></div>
                            <a class="itema" href="#">
                                <div class="link-holder">
                                    定制产品
                                    <div class="menuaa">
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                    </div>
                                </div>
                            </a>

                        </div>
                        <div class="nav_menu">
                            <div class="link-liner"></div>
                            <a class="itema" href="#">
                                <div class="link-holder">
                                    定制产品
                                    <div class="menuaa">
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                    </div>
                                </div>
                            </a>

                        </div>
                        <div class="nav_menu">
                            <div class="link-liner"></div>
                            <a class="itema" href="#">
                                <div class="link-holder">
                                    定制产品
                                    <div class="menuaa">
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                    </div>
                                </div>
                            </a>

                        </div>
                        <div class="nav_menu">
                            <div class="link-liner"></div>
                            <a class="itema" href="#">
                                <div class="link-holder">
                                    定制产品
                                    <div class="menuaa">
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                    </div>
                                </div>
                            </a>

                        </div>
                        <div class="nav_menu">
                            <div class="link-liner"></div>
                            <a class="itema" href="#">
                                <div class="link-holder">
                                    定制产品
                                    <div class="menuaa">
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                    </div>
                                </div>
                            </a>

                        </div>
                        <div class="nav_menu">
                            <div class="link-liner"></div>
                            <a class="itema" href="#">
                                <div class="link-holder">
                                    定制产品
                                    <div class="menuaa">
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                    </div>
                                </div>
                            </a>

                        </div>
                        <div class="nav_menu">
                            <div class="link-liner"></div>
                            <a class="itema" href="#">
                                <div class="link-holder">
                                    定制产品
                                    <div class="menuaa">
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                        <a href="" class="item">卫衣定制</a>
                                    </div>
                                </div>
                            </a>

                        </div>
                        <span class="qiu cart"><i class="iconfont icon-ziyuan"></i>购物车</span>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <section>
        <div class="cart-box">
            <div class="cart-list">
                <div class="list-th">
                    <div class="th t-check">
                        <input @click="allselect()" type="checkbox" class="allc">
                        全选
                    </div>
                    <div class="th t-info">
                        商品信息
                    </div>
                    <div class="th">
                        单价
                    </div>
                    <div class="th">
                        数量
                    </div>
                    <div class="th">
                        金额
                    </div>
                    <div class="th">
                        操作
                    </div>
                </div>
                <div class="oder-content">
                    <div v-for='(el,index) in list' :key='index' class="cart-item">
                        <ul class="items-conteent">
                            <li class="td t-check">
                                <input @click=select(el,index) type="checkbox" class="itemscheck">
                            </li>
                            <!-- c_id: 2  c_status: "1" p_create: "2021-03-25T01:05:41.000Z" p_id: 1
                                p_img: "./images/放大镜/小图1.png" p_name: "天竺棉优选款"  p_number: "5"
                                p_price: "10"
                                p_total: 50  u_id: 1 -->
                            <li class="td t-info">
                                <div class="inner">
                                    <img :src="el.p_img" alt="">
                                    <div class="item-info">
                                        <span>{{el.p_name}}</span>
                                    </div>
                                </div>
                            </li>
                            <li class="td t-price">
                                ${{el.p_price}}
                            </li>
                            <li class="td t-num">
                                <button @click=sub(el,index) class="sub">-</button>
                                <input :value='el.p_number'>
                                <button @click=sup(el,index) class="add">+</button>
                            </li>
                            <li class="td t-allp">
                                ${{el.p_total}}
                            </li>
                            <li class="td del">
                                <a @click=del_cart(el.c_id,index)>删除</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="cart-all">
                <div class="cft">
                </div>
                <div class="cft delft">
                    <span @click=delall(el.u_id,index) class="alldel">删除</span>
                </div>
                <div class="cft sec">
                    共
                    <span class="msg">
                        {{msgnum}}
                    </span>
                    商品
                </div>
                <div class="cft allprice">
                    <span>合计</span>
                    <span class="dol">$</span>
                    <span class="cft-allp">{{total}}.00</span>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="footer-c">
            <div class="footer-r">
                <a class="fimgbox" href="">
                    <img class="fimg1" src="./images/主页/footer1.png" alt="">
                </a>
                <div class="ftr-b1">
                    <div class="b1-dian"></div>
                    <div> 400-678-3233</div>
                </div>
                <div class="ftr-b2">
                    <div class="b1-dian"></div>
                    <div> 立即联系在线客服</div>
                </div>
            </div>
            <div class="footer-l">
                <div class="ftps">
                    <a href="">
                        <img src="./images/主页/底部t恤精灵图.png" alt="">
                        <div class="aaaa">T恤定制</div>
                    </a>
                    <a href="">
                        <img src="./images/主页/底部t恤精灵图.png" alt="">
                        <div class="aaaa">T恤定制</div>
                    </a><a href="">
                        <img src="./images/主页/底部t恤精灵图.png" alt="">
                        <div class="aaaa">T恤定制</div>
                    </a><a href="">
                        <img src="./images/主页/底部t恤精灵图.png" alt="">
                        <div class="aaaa">T恤定制</div>
                    </a><a href="">
                        <img src="./images/主页/底部t恤精灵图.png" alt="">
                        <div class="aaaa">T恤定制</div>
                    </a><a href="">
                        <img src="./images/主页/底部t恤精灵图.png" alt="">
                        <div class="aaaa">T恤定制</div>
                    </a><a href="">
                        <img src="./images/主页/底部t恤精灵图.png" alt="">
                        <div class="aaaa">T恤定制</div>
                    </a>
                </div>
                <div class="ftns">
                    <dl class="ft-co">
                        <dt>媒体报道</dt>
                        <dd><a href="">创业邦</a></dd>
                        <dd><a href="">36kr</a></dd>
                        <dd><a href="">i黑马</a></dd>
                        <dd><a href="">小方桌</a></dd>
                    </dl>
                    <dl class="ft-co">
                        <dt>友情链接</dt>
                        <dd><a href="">服装设计</a></dd>
                        <dd><a href="">36d</a></dd>
                        <dd><a href="">编程黑马</a></dd>
                        <dd><a href="">礼物</a></dd>
                        <dd><a href="">编程黑马</a></dd>
                        <dd><a href="">礼物</a></dd>
                    </dl>
                    <dl class="ft-co">
                        <dt>推荐新闻</dt>
                        <dd><a href="">服装设计</a></dd>
                        <dd><a href="">36d</a></dd>
                        <dd><a href="">编程黑马实</a></dd>
                        <dd><a href="">礼物</a></dd>
                        <dd><a href="">编程撒大声</a></dd>
                        <dd><a href="">礼物</a></dd>
                    </dl>
                    <dl class="ft-co">
                        <dt>关于我们</dt>
                        <dd><a href="">关于他们</a></dd>
                        <dd><a href="">36d</a></dd>
                        <dd><a href="">编程黑马实</a></dd>
                        <dd><a href="">礼物</a></dd>
                        <dd><a href="">编程撒大声</a></dd>
                        <dd><a href="">礼物</a></dd>
                        <dd><a href="">礼物</a></dd>
                    </dl>
                </div>
                <div class="fts">
                    <img src="./../images/主页/尾部的码.jpg" alt="" srcset="">
                    <div class="ftr-txt">
                        关注微信公众号
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bot">
            <a href="">
                Copyright © 2015-2021 厦门创艺社科技有限公司
            </a>
        </div>
    </footer>
    <div class="backTop">
        ∧
    </div>
    <script>
        let vm = new Vue({
            el: ".cart-box",
            data: {
                list: [],
                total: 0,
                num: 0,
                msgnum: 0
            },
            methods: {
                //点击全选
                allselect() {
                    $(".cart-item").find(".itemscheck").prop("checked", $(".allc").prop("checked"))
                    let price = 0;
                    // $('.itemscheck').prop("checked")=$(".allc").prop("checked")
                    //获取每个商品的金额
                    if ($('.allc').prop("checked") == true) {
                        //获取商品列表长度
                        let len =0;
                        let ax = {}
                        $(".items-conteent").each((index, el) => {
                            
                            price += parseInt($(el).find(".td.t-allp").text().split("$")[1]);
                            len+= Number($(el).find(".td.t-num").val())
                            return ax = {price,len}
                        })
                        //商品数量
                        this.msgnum = ax.len;
                        //商品总金额
                        this.total = ax.price;
                        //全选之后点击删除
                        let { u_id } = JSON.parse(localStorage.getItem('user') || "{}")
                        $(".alldel").on('click', function (c_id) {
                            let self = this;
                            $.ajax({
                                url: "/api/deleteall",
                                type: "post",
                                data: {
                                    u_id
                                },
                                success(res) {
                                    layer.msg(res.msg);
                                    if (res.status == 1) {
                                        // var index = self.list.findIndex(el => el.c_id == c_id);
                                        self.list.splice(delete_index, 1);
                                    }
                                }
                            })
                        })
                        let a = 0;
                        let self = this
                        //ajax
                        // $.ajax({
                        //     url: "/api/delete",
                        //     type: "post",
                        //     data: {
                        //         c_id
                        //     },
                        //     success(res) {
                        //         layer.msg(res.msg);

                        //         if (res.status == 1) {
                        //             // var index = self.list.findIndex(el => el.c_id == c_id);
                        //             self.list.splice(delete_index, 1);
                        //         }
                        //     }
                        // })
                        $(".cart-item :checked").each((index, el) => {
                            a += Number($(el).parents(".cart-item").find(".td.t-num >input").val())
                            self.msgnum = a;
                        })
                    } else {
                        this.total = 0;
                        this.msgnum = 0;
                    }

                },
                //点击选中
                select(el, select_index) {
                    let self = this;
                    //勾选的数量

                    if ($('.oder-content :checked').length == $('.cart-item').length) {
                        $(".allc").prop("checked", true);
                    } else {
                        $(".allc").prop("checked", false);
                    }
                    if ($($('.oder-content :checkbox').eq(select_index)).prop('checked')) {
                        self.total += Number(el.p_total);
                        self.msgnum += Number(el.p_number);
                        // $(".msg").text(Number($('.td.t-num').find("input").val()));
                    } else {
                        self.total -= Number(el.p_total);
                        console.log(self.total);
                        self.msgnum -= Number(el.p_number);
                    }
                }
                ,
                //减法
                sub(obj, select_index) {
                    let self = this;
                    if (obj.p_number == 1) {
                        $(".sub").css("cursor", "not-allowed")
                        return;
                    }
                    if (obj.p_number != 1) {
                        $(".sub").css("cursor", "pointer")
                    }
                    if ($($('.oder-content :checkbox').eq(select_index)).prop('checked')) {
                        self.total -= obj.p_price;
                        self.msgnum -= 1;
                    }
                    obj.p_number--;
                    obj.p_total = obj.p_number * obj.p_price;
                    let { c_id, p_number: num } = obj;
                    $.ajax({
                        url: "/api/update",
                        type: "post",
                        data: {
                            c_id,
                            num
                        }
                    }).then(function (res) {
                        layer.msg(res.msg)
                    })
                },
                //加法
                sup(obj, select_index) {
                    let self = this;
                    if ($($('.oder-content :checkbox').eq(select_index)).prop('checked')) {
                        self.total += Number(obj.p_price);
                        self.msgnum += 1;
                    }
                    obj.p_number++;
                    obj.p_total = obj.p_number * obj.p_price;
                    let { c_id, p_number: num } = obj;
                    $.ajax({
                        url: "/api/update",
                        type: "post",
                        data: {
                            c_id,
                            num
                        }
                    }).then(function (res) {
                        layer.msg(res.msg)
                    })
                }
                ,
                //删除 
                del_cart(c_id, delete_index) {
                    let self = this;
                    layer.confirm("确定要删除吗?亲..要不要再考虑一下下", {
                        btn: ["yes", "no"]
                    }, function (index) {
                        layer.close(index);
                        $.ajax({
                            url: "/api/delete",
                            type: "post",
                            data: {
                                c_id
                            },
                            success(res) {
                                layer.msg(res.msg);

                                if (res.status == 1) {
                                    // var index = self.list.findIndex(el => el.c_id == c_id);
                                    self.total -= self.list[delete_index].p_total;
                                    self.msgnum-= self.list[delete_index].p_number
                                    self.list.splice(delete_index, 1);
                                   if(self.list.length==0){
                                       $('.allc').prop("checked",false);
                                   }
                                }
                            }
                        })
                    })
                }
            }
            ,
            //钩子函数(自动触发) created
            created: function () {

                let self = this;
                let { u_id: userId } = JSON.parse(localStorage.getItem("user") || '{}');

                $.ajax({
                    url: "/api/cartlist?tmp=" + Date.now(),
                    data: { userId },
                    success(res) {
                        self.list = res.data;
                        // self.list.forEach(el => {
                        //     self.num += Number(el.p_number)
                        // });
                    }
                })
            }
        })
    </script>
</body>

</html>